<template>
  <div>
    <!-- 头部 --start-->
    <div class="nav">
      <p>
        <span>.</span>
        销售合同详情
      </p>

      <div id="nav_go5">
        <el-button
          type="info"
          icon="el-icon-back"
          class="btn_fanhui"
          @click="revert()"
          >返回</el-button
        >
      </div>
    </div>
    <!-- 头部 --end-->
    <div class="bigbox">
      <!-- 客户信息 --start-->
      <div class="conter_box1">
        <p>客户信息</p>
        <ul>
          <li>
            <span>客户编号</span>
            <el-input
              placeholder="请输入客户编号"
              style="width: 70%"
              v-model="input"
            ></el-input>
          </li>
          <li>
            <span>客户名称</span>
            <el-select
              placeholder="请选择客户名称"
              style="width: 70%"
              v-model="input"
            >
              <el-option
                v-for="item in ordtypevalue"
                :key="item.key"
                :label="item.value"
                :value="item.value"
              ></el-option>
            </el-select>
          </li>
          <li>
            <span>联系人</span>
            <el-input
              placeholder="请输入联系人"
              style="width: 70%"
              v-model="input"
            ></el-input>
          </li>
          <li>
            <span>联系方式</span>
            <el-input
              placeholder="请输入联系方式"
              style="width: 70%"
              v-model="input"
            ></el-input>
          </li>
          <li class="site-input">
            <span>企业地址</span>
            <el-input
              placeholder="请输入企业地址"
              style="width: 70%"
              v-model="input"
            ></el-input>
          </li>
        </ul>
      </div>
      <!-- 客户信息 --end-->

      <!-- 合同信息 --start-->
      <div class="conter_box2">
        <p>客户信息</p>
        <ul>
          <li>
            <span>合同编号</span>
            <el-input
              placeholder="请输入合同编号"
              style="width: 70%"
              v-model="input"
            ></el-input>
          </li>
          <li>
            <span>合同类型</span>
            <el-select
              placeholder="请选择合同类型"
              style="width: 70%"
              v-model="input"
            >
              <el-option
                v-for="item in ordtypevalue"
                :key="item.key"
                :label="item.value"
                :value="item.value"
              ></el-option>
            </el-select>
          </li>
          <li>
            <span>状态</span>
            <el-select
              placeholder="请选择状态"
              style="width: 70%"
              v-model="input"
            >
              <el-option
                v-for="item in ordtypevalue"
                :key="item.key"
                :label="item.value"
                :value="item.value"
              ></el-option>
            </el-select>
          </li>
          <li>
            <span>币别</span>
            <el-select
              placeholder="请选择币种"
              style="width: 70%"
              v-model="input"
            >
              <el-option
                v-for="item in ordtypevalue"
                :key="item.key"
                :label="item.value"
                :value="item.value"
              ></el-option>
            </el-select>
          </li>
          <li class="data-input">
            <span>生效日期</span>
            <el-input
              placeholder="请输入生效日期"
              style="width: 70%"
              v-model="input"
            ></el-input>
          </li>
          <li class="data-input">
            <span>失效日期</span>
            <el-input
              placeholder="请输入失效日期"
              style="width: 70%"
              v-model="input"
            ></el-input>
          </li>
        </ul>
      </div>
      <!-- 产品信息 --end-->
      <!-- 产品价格 start-->
      <div class="conter_box3">
        <p>合同信息</p>
        <template>
          <el-table :data="tableData" style="width: 100%" max-height="310px">
            <el-table-column label="序号" align="center" >
            </el-table-column>
            <el-table-column label="产品图号" align="center" >
              <template>
                <el-input v-model="input"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="产品名称" align="center" >
              <template>
                <el-input v-model="input"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="单位" align="center" >
              <template>
                <el-input v-model="input"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="含税单价 (元)" align="center" >
              <template>
                <el-input v-model="input"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="产品数量" align="center" >
              <template>
                <el-input v-model="input"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="小计 (元)" align="center" >
              <template>
                <el-input v-model="input"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="状态" align="center" >
              <template>
                <el-select v-model="value" placeholder="请选择状态">
                  <el-option
                    v-for="item in fukuanstylevalue"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-table-column>

            <!-- <el-table-column label="操作" align="center" width="205">
              <template slot-scope="scope">
                <el-button type="primary" size="small" @click="addDomain"
                  >新增</el-button
                >
                <el-button
                  type="danger"
                  @click="resetForm(scope)"
                  v-if="scope.$index !== 0"
                  size="small"
                  >删除</el-button
                >
              </template>
            </el-table-column> -->
          </el-table>
        </template>
      </div>
      <!-- 产品价格 end-->
    </div>

    <!-- 底部按钮 --start-->
    <div class="bottom">
      <el-button type="primary" size="medium">确定</el-button>
      <el-button type="info" size="medium">返回</el-button>
    </div>
    <!-- 底部按钮 --end-->
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      input: "",
      value: [{}],
      tableData: [{}],
      ordtypevalue: [{}],
      fukuanstylevalue: [
        { key: 1, value: "全款" },
        { key: 2, value: "分期" },
        { key: 3, value: "特殊" },
        { key: 4, value: "月结" },
      ],
    };
  },
  created() {},
  methods: {
    //新增采购-------动态添加
    addDomain() {
      var list = {
        productname: "",
      };
      this.tableData.unshift(list);
    },
    //新增采购-------动态删除
    resetForm(e) {
      console.log(e);
      this.tableData.splice(e.$index, 1);
    },
    //返回
    revert() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/scss/base.scss";
.bigbox {
  width: 98%;
  margin-left: 25px;
}

.nav {
  height: 60px;
  padding: 0 1%;
  position: relative;
  p {
    height: 40px;
    margin: 10px 0;
    line-height: 40px;
    span {
      background: $Header_color;
      color: $Header_color;
    }
  }
  #nav_go5 {
    position: absolute;
    top: 10px;
    right: 1%;
    img {
      height: 16px;
      padding-right: 10px;
    }
  }
}

.conter_box1 {
  background: $white;
  height: 250px;
  width: 98%;
  padding: 5px 1% 0 1%;

  p {
    height: 40px;
    margin-top: 20px;
  }
  ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    // color: #909399;
    li {
      width: 25%;
      font-size: 16px;
      margin-bottom: 10px;
      // text-align: center;
      margin-top: 10px;
      span{
        display: inline-block;
        width: 25%;
      }
    }

    .site-input {
      width: 60%;
      // margin-left: -20px;
    }
  }
}

.conter_box2 {
  background: $white;
  // height: 100px;
  width: 98%;
  margin-top: 10px;
  padding: 5px 1% 0 1%;
  p {
    height: 40px;
    margin-top: 20px;
  }
  ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    // color: #909399;
    li {
      width: 25%;
      font-size: 16px;
      margin-bottom: 10px;
      margin-top: 10px;
    }
    .data-input {
      width: 50%;
    }
  }
}
.conter_box3 {
  background: $white;
  // min-height: 160px;
  //max-height: 220px;
  width: 98%;
  margin-top: 10px;
  padding: 5px 1% 0 1%;

  p {
    height: 40px;
    margin-top: 20px;
  }
}

.bottom {
  text-align: center;
  padding-top: 20px;
  padding-bottom: 10px;
  // background: $white;
  position: relative;

  p {
    width: 20%;
    // height: 50px;
    line-height: 40px;
    position: absolute;
    top: 30px;
    left: 1%;
    display: flex;
    justify-content: space-between;
  }
}
</style>
